<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!doctype html>
<html lang="zh">
    <style>
        .btn-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end; /* 右对齐 */
        }

        /* 3D按钮基础样式 */
        .btn-3d {
            padding: 14px 32px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            top: 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        /* 动态阴影效果 */
        .btn-3d::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.1);
            filter: blur(3px);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-tech-blue {
            background: #2196F3;
            color: white;
            box-shadow: 0 5px 0 #1976D2;
        }
        .btn-tech-blue:hover { background: #42A5F5; }

        /* 交互效果 */
        .btn-3d:hover {
            top: 2px;
            box-shadow: 0 3px 0; /* 自动继承底部颜色 */
        }

        .btn-3d:active {
            top: 5px;
            box-shadow: none;
        }

        .btn-3d:hover::after {
            opacity: 0.3;
        }

        /* 图标样式 */
        .btn-3d i {
            font-size: 18px;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
        }


        /* 完整样式 */
        .pagination {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .page-item {
            list-style: none;
        }

        .page-link {
            padding: 8px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: #ffffff;
            color: #1a237e;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Segoe UI', system-ui;
            font-size: 14px;
        }

        .page-link:hover:not(:disabled) {
            background: #f5f5f5;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .page-link:disabled {
            background: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .page-item.active .page-link {
            background: #1a237e;
            border-color: #1a237e;
            color: white !important;
        }

        .page-first {
            background: #e3f2fd !important;
            border-color: #90caf9 !important;
        }

        .page-last {
            background: #f3e5f5 !important;
            border-color: #ce93d8 !important;
        }

        .fas {
            font-size: 14px;
        }

        /* 删除链接样式 */
        .delete-link {
            color: #dc3545;
            text-decoration: none;
            transition: all 0.2s;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .delete-link:hover {
            background: #f8d7da;
            text-decoration: underline;
        }
    </style>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="通辽航空管理平台 ">
		<title>通辽航空管理平台 </title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="fonts/style.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/css.css">

	</head>
	<body>
		<header class="header">
			<div class="container-fluid">
				<div class="row gutters">
					<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-9">
						<a href="index.html" class="logo"> <img src="img/logo.png">通辽航空管理平台  </a>
					</div>
					<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-3">
						<ul class="header-actions">
							<li class="dropdown d-none d-sm-block">

								<div class="dropdown-menu lrg" aria-labelledby="notifications">
									<div class="dropdown-menu-header">
										<h5>Notifications</h5>
										<p class="m-0 sub-title">You have 5 unread notifications</p>
									</div>
									<ul class="header-notifications">
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user24.png" alt="avatar" />
														<span class="notify-iocn icon-drafts text-danger"></span>
													</div>
													<div class="details">
														<h6>Dr. Clive</h6>
														<p>Appointed as a new President 2019-2020</p>
													</div>
												</a>
											</li>
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user21.png" alt="avatar" />
														<span class="notify-iocn icon-layers text-info"></span>
													</div>
													<div class="details">
														<h6>Dr. G. Levsmia</h6>
														<p>Will be on leave on October 2nd week.</p>
													</div>
												</a>
											</li>
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user19.png" alt="avatar" />
														<span class="notify-iocn icon-person_add text-success"></span>
													</div>
													<div class="details">
														<h6>Dr. George S</h6>
														<p>Sent new applointments list</p>
													</div>
												</a>
											</li>
										</ul>
								</div>
							</li>
							<li class="dropdown">
								<a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true">
									<span class="user-name">管理员</span>
									<span class="avatar">NR<span class="status busy"></span></span>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userSettings">
									<div class="header-profile-actions">

										<a href="hospital-add-doctor.html"><i class="icon-user1"></i> My Profile</a>
										<a href="account-settings.html"><i class="icon-settings1"></i> Account Settings</a>
										<a href="hospital-reviews.html"><i class="icon-activity"></i> Activity Logs</a>
										<a href="login.html"><i class="icon-log-out1"></i> Sign Out</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</header>
		<div class="container-fluid">
			<!-- Navigation start -->
			<nav class="navbar navbar-expand-lg custom-navbar">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#royalHospitalsNavbar" aria-controls="royalHospitalsNavbar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i></i>
						<i></i>
						<i></i>
					</span>
				</button>
				<div class="collapse navbar-collapse" id="royalHospitalsNavbar">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="index.html">
								<i class="icon-home nav-icon"></i>
								首页</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="doctoRs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-person_pin nav-icon"></i>
								医师中心
							</a>
							<ul class="dropdown-menu" aria-labelledby="doctoRs">
								<li><a class="dropdown-item" href="资料编辑.html">资料编辑</a></li>
								<li><a class="dropdown-item" href="修改密码.html">修改密码</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-add-user nav-icon"></i>
								用户管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="pagesDropdown">
								<li><a class="dropdown-item" href="我的用户.html">我的用户</a></li>
								<li><a class="dropdown-item" href="添加用户.html">添加用户</a></li>

							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="formsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment_turned_in nav-icon"></i>
								评测管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="formsDropdown">
								<li><a class="dropdown-item" href="评测预约.html">评测预约</a></li>
								<li><a class="dropdown-item" href="答题记录.html">答题记录</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle active-page" href="#" id="uiElementsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment nav-icon"></i>
								用户管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="uiElementsDropdown">

								<li><a class="dropdown-item" href="${pageContext.request.contextPath}/UserList?pageNo=1">用户数据管理</a></li>
								<li><a class="dropdown-item active-page" href="">查询用户</a></li>

							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="tablesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-beenhere  nav-icon"></i>
								预警管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="tablesDropdown">
								<li><a class="dropdown-item" href="预警管理.html">预警管理</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="graphsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-folder nav-icon"></i>量表管理
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="graphsDropdown">
								<li><a class="dropdown-item" href="所有量表.html">所有量表</a></li>
								<li><a class="dropdown-item" href="套餐管理.html">套餐管理</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-burst_mode nav-icon"></i>
								临床数据
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="loginDropdown">
								<li><a class="dropdown-item" href="临床数据管理.html">临床数据管理</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-watch_later nav-icon"></i>
								预约排班
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="loginDropdown">
								<li><a class="dropdown-item" href="预约管理.html">预约管理 </a></li>
								<li><a class="dropdown-item" href="排班管理.html">排班管理 </a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-sports-club nav-icon"></i>
								训练管理
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="loginDropdown">
								<li><a class="dropdown-item" href="心理训练管理.html">心理训练管理</a></li>
								<li><a class="dropdown-item" href="添加心理训练.html">添加心理训练</a></li>
								<li><a class="dropdown-item" href="训练套餐管理.html">训练套餐管理</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
			<div class="main-container">
				<div class="page-header">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">用户管理</li>
						<li class="breadcrumb-item active">用户数据管理</li>
					</ol>
				</div>
				<div class="content-wrapper">
					<div class="card-body">
						<!-- <div class="topbtn"> <a href="javascript:;" class="btn btn-info">报告管理</a> </div>-->
						  <div class="selbox">
							<div class="form1">
							  <ul class="row">

								<form action="${pageContext.request.contextPath}/UserListByNameServlet" method="get">
                                    <input type="hidden" name="pageNo" value="1">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="form-group">
                                                <label>姓名：</label>
                                                <input type="text" class="form-control" name="UserName"
                                                       placeholder="输入查询姓名" value="${param.UserName}">
                                            </div>
                                        </div>
                                        <div class="col-xs-4" style="padding-top: 25px">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="glyphicon glyphicon-search"></i> 查询
                                            </button>
                                        </div>
                                    </div>
                                </form>
							  </ul>
							</div>
								<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
									<div class="form1">
										<ul class="row">
							  <li class="col-xs-4"> <span>确认状态：</span>
								  <select class="form-control"><option>请选择</option></select>
								</li>
								  <li class="col-xs-4"> <span>执行状态：</span>
								 <select class="form-control"><option>请选择</option></select>
								</li>
								<li class="col-xs-4">
								<span>完成时间：</span>
								<input type="text" class="form-control " id="date" style="min-width:230px;" placeholder="请选择起止时间" lay-key="1">
							</li>
							</ul>
						</div>

						 </div>

						 <form id="deleteForm" action="${pageContext.request.contextPath}/UserListDeleteServlet" method="post">
						  <div class="tablebox">
							  <table class="table">
							<thead>
							  <tr>
								<th>全选 <input type="checkbox" id="selectAll"></th>
								<th>用户ID</th>
								<th>用户照片</th>
								<th>姓名</th>
								<th>手机号</th>
								<th>登录密码</th>
								<th>身份证号</th>

							</tr>

							</thead><tbody>

							<tr>
                                <c:forEach items="${list}" var="user">
                                   <tr>
                                    <th><input type="checkbox" name="userIds" value="${user.userId}"></th>
                                    <td>${user.userId}</td>
                                    <td>${user.uimage}</td>
                                    <td>${user.name}</td>
                                    <td>${user.phone}</td>
                                    <td>${user.password}</td>
                                    <td>${user.identityCard}</td>
                                    <td><a href="javascript:;">编辑</a></td>
                                    <td>
                                        <a href="javascript:;"
                                            onclick="confirmDelete('${user.userId}')"
                                            class="delete-link">
                                            删除
                                        </a>
                                    </td>

                                  </tr>
                                </c:forEach>
							</tr>

						 </tbody>

						  </table>
							  </div>
							   <div style="margin-top: 20px;" class="btn-container">
                                      <button type="button" class="btn-3d btn-tech-blue" onclick="handleDelete()">批量删除</button>
                               </div>
                        </form>


                          <%-- 页码显示 --%>

                          <nav aria-label="Page navigation" class="page">
                            <ul class="pagination">
                                <%-- 上一页 --%>
                                <li class="page-item ${box.pageNo == 1 ? 'disabled' : ''}">
                                    <c:choose>
                                        <c:when test="${box.pageNo > 1}">
                                            <c:url var="prevUrl" value="/UserListByNameServlet">
                                                <c:param name="pageNo" value="${box.pageNo - 1}"/>
                                                <c:param name="UserName" value="${UserName}"/>
                                            </c:url>
                                            <a class="page-link" href="${prevUrl}" aria-label="Previous">
                                                <span aria-hidden="true">上一页</span>
                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a class="page-link" href="javascript:;" aria-label="Previous">
                                                <span aria-hidden="true">上一页</span>
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>

                                <%-- 页码计算逻辑保持不变 --%>
                                <c:set var="totalPages" value="${box.getBottomPageNo()}" />
                                <c:set var="startPage" value="${box.pageNo - 2}" />
                                <c:set var="endPage" value="${box.pageNo + 2}" />

                                <%-- 修正后的页码范围 --%>
                                <c:choose>
                                    <c:when test="${startPage < 1}">
                                        <c:set var="endPage" value="${endPage + (1 - startPage)}" />
                                        <c:set var="startPage" value="1" />
                                    </c:when>
                                    <c:when test="${endPage > totalPages}">
                                        <c:set var="startPage" value="${startPage - (endPage - totalPages)}" />
                                        <c:set var="endPage" value="${totalPages}" />
                                    </c:when>
                                </c:choose>
                                <c:set var="startPage" value="${startPage < 1 ? 1 : startPage}" />
                                <c:set var="endPage" value="${endPage > totalPages ? totalPages : endPage}" />

                                <%-- 首部省略号 --%>
                                <c:if test="${startPage > 1}">
                                    <c:url var="firstPageUrl" value="/UserListByNameServlet">
                                        <c:param name="UserName" value="${UserName}"/>
                                        <c:param name="pageNo" value="1"/>
                                    </c:url>
                                    <li class="page-item">
                                        <a class="page-link" href="${firstPageUrl}">1</a>
                                    </li>
                                    <c:if test="${startPage > 2}">
                                        <li class="page-item disabled">
                                            <span class="page-link">...</span>
                                        </li>
                                    </c:if>
                                </c:if>

                                <%-- 核心页码 --%>
                                <c:forEach begin="${startPage}" end="${endPage}" varStatus="i">
                                    <c:url var="pageUrl" value="/UserListByNameServlet">
                                        <c:param name="UserName" value="${UserName}"/>
                                        <c:param name="pageNo" value="${i.index}"/>
                                    </c:url>
                                    <li class="page-item ${i.index == box.pageNo ? 'active' : ''}">
                                        <a class="page-link" href="${pageUrl}">${i.index}</a>
                                    </li>
                                </c:forEach>

                                <%-- 尾部省略号 --%>
                                <c:if test="${endPage < totalPages}">
                                    <c:if test="${endPage < totalPages - 1}">
                                        <li class="page-item disabled">
                                            <span class="page-link">...</span>
                                        </li>
                                    </c:if>
                                    <c:url var="lastPageUrl" value="/UserListByNameServlet">
                                        <c:param name="UserName" value="${UserName}"/>
                                        <c:param name="pageNo" value="${totalPages}"/>
                                    </c:url>
                                    <li class="page-item">
                                        <a class="page-link" href="${lastPageUrl}">${totalPages}</a>
                                    </li>
                                </c:if>

                                <%-- 下一页 --%>
                                <li class="page-item ${box.pageNo == totalPages ? 'disabled' : ''}">
                                    <c:choose>
                                        <c:when test="${box.pageNo < totalPages}">
                                            <c:url var="nextUrl" value="/UserListByNameServlet">
                                                <c:param name="pageNo" value="${box.pageNo + 1}"/>
                                                <c:param name="UserName" value="${UserName}"/>
                                            </c:url>
                                            <a class="page-link" href="${nextUrl}" aria-label="Next">
                                                <span aria-hidden="true">下一页</span>
                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a class="page-link" href="javascript:;" aria-label="Next">
                                                <span aria-hidden="true">下一页</span>
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                            </ul>
                        </nav>
						</div>
					  </div>
				</div>
			</div>

			<footer class="main-footer"> 2025 © Copyright by <a href="https://www.bootstrapmb.com">bootstrapMB</a>-通辽航空管理平台</footer>

		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/moment.js"></script>

		<script src="laydate/laydate.js" type="text/javascript"></script>
		<script>
		lay('#version').html('-v'+ laydate.v);
		laydate.render({
			elem: '#date'
		 ,range: true
		  ,theme: '#13a98c'
		});
		</script>



		<script>
        document.getElementById('selectAll').addEventListener('click', function(e) {
            const checkboxes = document.querySelectorAll('input[name="userIds"]');
            checkboxes.forEach(cb => cb.checked = e.target.checked);
        });

        function handleDelete() {
            const selected = document.querySelectorAll('input[name="userIds"]:checked');
            if (selected.length === 0) {
                alert('请至少选择一条记录！');
                return;
            }
            if (confirm('确定要删除选中的用户吗？')) {
                document.getElementById('deleteForm').submit();
            }
        }
        </script>

        <script>
        // 删除确认函数
        function confirmDelete(userId) {
            const isConfirm = confirm("确定要删除用户ID为 " + userId + " 的记录吗？此操作不可恢复！");
            if(isConfirm) {
                window.location.href = '${pageContext.request.contextPath}/UserDeleteServlet?userId=' + userId;
            }
        }
        </script>


	</body>
</html>